<html>

<head>
    <style>
        .button {
            width: 8em;
            height: 2em;
            background-color: #424242;
            text-align: center;
            line-height: 2em;
            border-radius: 0.3em;
            color: #dadada;
            user-select: none;
        }

        .button:active {
            transform: background-color 200ms linear 0;
            background-color: #8b8b8b;
        }

        #inputText {
            width: 100%;
            height: 5em;
            margin-bottom: 0.5em;
            resize: none;
        }

        #sendGroup {
            padding: 1em 1em 4em 1em;
        }

        #msgGroup {
            margin: 1em;
        }

        #msgTitle {
            color: rgb(100, 100, 100);
            font-weight: bold;
            padding: 0.5em;
            border-bottom: solid 1px rgb(182, 182, 182);
        }

        #msgContent {
            padding: 1em;
        }

        #btnClearMsg {
            float: right;
            color: rgb(131, 131, 131);
            cursor: pointer;
            user-select: none;
            font-weight: normal;
        }

        .msgItem {
            padding-top: 1.2em;
            padding: 1.2em 0.5em 0.2em 0.5em;
            border-bottom: solid 1px rgb(228, 228, 228);
        }

        .msgItemContent {}

        .msgItemBottom {
            color: rgb(131, 131, 131);
            font-size: 0.8em;
        }

        .msgItemIp {}

        .msgItemTime {
            float: right;
        }
    </style>
    <script>
        /**@type {WebSocket} */
        // let ws = new WebSocket('ws://127.0.0.1:12139');
        let ws = new WebSocket('ws://175.27.232.13:12139');
        ws.onopen = function () {
             console.log("onopen");
        }
        ws.onclose = function () {
             console.log("onclose");
        }
        ws.onerror = function (e) {
             console.log("onerror", e);
        }

        ws.onmessage = function (e) {
             console.log("onmessage", e);

            const msg = JSON.parse(e.data);
            const list = listenerMap[msg.name];
            if (list) {
                for (const callback of list) {
                    callback(msg.success, msg.data);
                }
            }
        }

        function sendMsg(name, data) {
            ws.send(JSON.stringify({
                name,
                data
            }));
        }

        const listenerMap = {};
        function onMessage(name, callback) {
            if (!listenerMap[name]) {
                listenerMap[name] = [];
            }

            listenerMap[name].push(callback);
        }

        function offMessage(name, callback) {
            if (!listenerMap[name]) {
                 console.log("can not find the name");
                return;
            }

            const list = listenerMap[name];
            listenerMap[name] = list.filter(e => e !== callback);
        }
    </script>
    <script>/**@type {HTMLTextAreaElement} */
        let inputText;
        let uuid;
        /**@type {HTMLDivElement} */
        let msgContent;

        function onLoad() {
            inputText = document.getElementById("inputText");
            msgContent = document.getElementById('msgContent');

            onMessage("connection", function (success, data) {
                if (success) {
                    uuid = data.uuid;
                     console.log("connect success", uuid);
                } else {
                     console.log("connect fail");
                }
            });

            onMessage("syncMsgNTF", function (success, data) {
                msgContent.innerHTML = "";
                data.items.forEach(e => {
                    const item = document.createElement("div");
                    item.className = "msgItem";
                    msgContent.appendChild(item);

                    const content = document.createElement("div");
                    content.className = "msgItemContent";
                    content.innerHTML = e.text;
                    item.appendChild(content);

                    const bottom = document.createElement("div");
                    bottom.className = "msgItemBottom";
                    item.appendChild(bottom);

                    const ip = document.createElement("span");
                    ip.className = "msgItemIp";
                    bottom.appendChild(ip);
                    ip.innerHTML = e.ip;

                    const time = document.createElement("span");
                    time.className = "msgItemTime";
                    bottom.appendChild(time);
                    time.innerHTML = e.time;
                });
            });
        }

        function onClickSend() {
            const text = inputText.value;
            if (!text) {
                return;
            }
            sendMsg("sendMsgReq", {
                text
            });
            inputText.value = "";
        }

        function onClickClearMsg() {
            sendMsg("clearMsgReq", {});
        }</script>
</head>

<body onload="onLoad()">
    <div id="sendGroup">
        <textarea id="inputText"></textarea>
        <div class="button" onclick="onClickSend()">Send</div>
    </div>
    <div id="msgGroup">
        <div id="msgTitle">
            <span>Message List</span>
            <span id="btnClearMsg" onclick="onClickClearMsg()">Clear</span>
        </div>
        <div id="msgContent"></div>
    </div>
</body>

</html>